<template>
  <div class="home">
    <header>
      <!-- 菜单 -->
      <Menubox />
      <div class="header-login">
        <div class="search-box">
          <a-input
            placeholder="搜索图片"
            v-model="searchValue"
            enter-button
            @blur="blueon"
            @focus="onfocusshow = true"
            style="border-top-right-radius: 0; border-bottom-right-radius: 0"
            @keyup.enter="onSearch"
          />
          <a-button type="primary" icon="search" @click="onSearch">搜索</a-button>
          <div class="resou" v-if="onfocusshow">
            <p class="title">热门搜索</p>
            <p
              v-for="(item, index) in searchList"
              :key="index"
              class="resouname"
              @click="oncilckSearch(item)"
            >
              <span>
                <span class="sortindex">{{ index + 1 }}</span>
                <span>{{ item.name }}</span>
              </span>
              <img src="../assets/resou.png" alt width="17px" />
            </p>
          </div>
        </div>
        <a-badge
          :count="dynamicList.length + giveList.length"
          style="margin-right: 25px; cursor: pointer"
          title="查看消息"
          @click="lookxiaoxi"
        >
          <img src="../assets/tz.png" alt width="25px" />
        </a-badge>
        <div>
          <a-button type="primary" @click="login" v-if="userInfo == null"
            >登录/注册</a-button
          >
          <a-dropdown
            :trigger="['click']"
            v-if="userInfo != null"
            :getPopupContainer="(trigger) => trigger.parentNode"
            style="top: 100px; z-index: 100"
          >
            <div class="userInfo" @click="(e) => e.preventDefault()">
              <img
                :src="userInfo != null && baseUrl + userInfo.userImg"
                alt
                :title="userInfo != null && userInfo.userName"
              />
            </div>
            <a-menu slot="overlay" @click="userOnClick">
              <a-menu-item key="1" class="userboxziliao">
                <a-icon type="user" />个人资料
              </a-menu-item>
              <a-menu-item key="3" class="userboxziliao">
                <a-icon type="bell" />我的消息
                <a-badge
                  :count="dynamicList.length + giveList.length"
                  style="top: -3px"
                ></a-badge>
              </a-menu-item>
              <a-menu-item key="2"> <a-icon type="poweroff" />退出登录 </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </div>
    </header>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
// @ is an alias to /src
import { requset } from "@/api";
import Menubox from "./navigation/Menubox";
import EventBus from "@/utils/EventBus";
export default {
  name: "HomeView",
  components: {
    Menubox,
  },
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      searchValue: "",
      searchList: [],
      onfocusshow: false,
      dynamicList: [],
      giveList: [],
    };
  },
  mounted() {
    EventBus.$on("userInfo", (userInfo) => {
      this.userInfo = userInfo;
    });
    this.searchlist();

    if (localStorage.getItem("token")) {
      this.getmessage();
      this.getmessagegive();
    }
  },
  methods: {
    lookxiaoxi() {
      this.$router.push({
        path: "/userSettings",
        query: { name: "message" },
      });
    },
    // 去登陆页
    login() {
      this.$router.push("/login");
    },
    // 用户头像下拉菜单
    userOnClick(e) {
      // 1: 个人资料
      if (e.key == 1) {
        this.$router.push("/userSettings");
      } else if (e.key == 2) {
        localStorage.clear();
        window.location.reload();
      } else if (e.key == 3) {
        this.lookxiaoxi();
      }
    },
    onSearch() {
      const name = this.$router.currentRoute.name;
      this.searchnum();
      if (this.searchValue !== "") {
        this.searchlist();
      }

      // 首页搜索
      if (name == "home") {
        //暂时不做别的页面搜索
        EventBus.$emit("onSearch", this.searchValue);
      }
    },
    // 搜索次数
    searchnum() {
      requset("post", "/searchList/search", { name: this.searchValue });
    },
    // 热搜列表
    searchlist() {
      requset("get", "/searchList/search/list", {}).then((res) => {
        if (res.data.code == 200) {
          this.searchList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //评论未读消息通知
    getmessage() {
      requset("post", "/message/dynamic/list", {
        userId: this.userInfo.userId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.dynamicList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //点赞未读消息通知
    getmessagegive() {
      requset("post", "/message/give/list", {
        userId: this.userInfo.userId,
      }).then((res) => {
        if (res.data.code == 200) {
          this.giveList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    blueon() {
      setTimeout(() => {
        this.onfocusshow = false;
      }, 100);
    },
    oncilckSearch(item) {
      this.searchValue = item.name;
      // this.onfocusshow = true;
      // setTimeout(() => {
      //   this.searchValue = item.name;
      // }, 100);
    },
  },
};
</script>
<style scoped>
header {
  width: 100%;
  height: 52px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 100px;
  /* overflow: hidden; */
  position: fixed;
  top: 0;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
  z-index: 999;
}

::v-deep .ant-btn {
  border-radius: 2px;
}
main {
  margin-top: 55px;
  padding: 0 100px;
}
/* 如果浏览器窗口小于 500px */
@media only screen and (max-width: 1100px) {
  header,
  main {
    padding: 0 10px;
  }
}

/* 如果浏览器窗口小于 500px */
@media only screen and (max-width: 800px) {
  .search-box,
  .userboxziliao,
  .ant-badge {
    display: none !important;
  }
}
.userInfo {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
}
.userInfo:hover {
  cursor: pointer;
}
.userInfo img {
  border-radius: 3px;
  width: 100%;
  height: 100%;
}
::v-deep .ant-dropdown {
  position: fixed !important;
  top: 52px !important;
}
.header-login {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-box {
  margin-right: 20px;
  width: 400px;
  position: relative;
  display: flex;
  align-items: center;
}
.resou {
  position: absolute;
  top: 35px;
  width: 100%;
  background: #fff;
  z-index: 100;
  box-shadow: -3px 4px 10px 2px rgb(47 47 47 / 10%);
  border-radius: 2px;
}
.resou .title {
  padding: 10px;
  font-size: 12px;
  color: #c5bebe;
  margin: 0;
}
.resouname {
  margin: 0;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.resouname:hover {
  background: #d8fff0;
  cursor: pointer;
}
.sortindex {
  color: #ff8855;
  font-weight: 800;
  display: inline-block;
  width: 15px;
}
</style>
